// 配置路由相关的信息
// 1.导入vue
import Vue from 'vue'
// 2.通过vue。use（插件），安装插件
import Router from 'vue-router'

// 直接导入模式
// import home from '@/components/home'
// import about from '@/components/about'
// import user from '@/components/user'

//  懒加载方式 推荐方式
const home = () => import('@/components/home')
const about = () => import('@/components/about')
const user = () => import('@/components/user')
const homeNews = () => import('@/components/homeNews')
const homeMessage = () => import('@/components/homeMessage')
const profile = () => import('@/components/profile')

// 3.使用路由
Vue.use(Router)

// 4.定义路由表
const routes = [
  { path: '/', redirect: home }, // 设置默认路径
  { path: '/about', component: about, meta: { title: '关于' } },
  {
    path: '/home',
    component: home,
    meta: { title: '首页' },
    children: [
      // 子路由
      { path: '', component: homeNews }, // 设置子路由的默认路径
      { path: 'news', component: homeNews },
      { path: 'message', component: homeMessage }
    ]
  },
  { path: '/user/:userId', component: user, meta: { title: '用户' } }, // 动态路由，带参数 通过params方式
  { path: '/profile', component: profile, meta: { title: '用户档案' } } // 动态路由，带参数 通过query方式
]

// 5.配置路由和组件之间的应用关系
const router = new Router({
  routes,
  mode: 'history' // 路由改为histry模式
})

// 6.配置路由守卫 前置守卫
// Router.beforeEach(function (to,from,next) {})
router.beforeEach((to, from, next) => {
  // 从from 跳转到to
  console.log('beforeEach')
  console.log(to)
  document.title = to.matched[0].meta.title // 利用meta和路由守卫动态修改页面标题
}) // 箭头函数

// 7.配置后置钩子
router.afterEach((to, from) => {
  console.log('afterEach')
  console.log(to)
})
// 7.将router 对象传入到vue实例
export default router
